<template>
	<div class="self-desc">
		<div class="edit-btn" v-if="editState == 0" @click="editState = 1"><img src="../../../../assets/me/edit.png"><span>修改</span></div>
		<div class="title">自我描述</div>
		<div class="desc-content" v-if="editState == 0 && form.selfDesc.length>0">
			{{form.selfDesc}}
		</div>
		<div class="desc-content no-data" v-if="editState == 0 && form.selfDesc.length==0">
			自我描述是你客观认识自己的基石，快来填写吧！
		</div>
		<div class="desc-edit" v-if="editState == 1">
			<div class="content">
				<el-form ref="form" :model="form" :rules="rules" label-width="10px" label-position="left" class="flex" hide-required-asterisk>
					<div class="edit-item flex">
						<el-form-item class="flex-item" prop="selfDesc">
							<el-input type="textarea" v-model="form.selfDesc" maxlength="200" show-word-limit placeholder="客观全面的自我评价更容易获得企业的好感，快来完善以获得HR的亲睐！"></el-input>
						</el-form-item>
					</div>
				</el-form>
				<div class="form-option">
					<div class="save qida-success-btn" @click="saveEdit">保存</div>
					<div class="cancel qida-cancel-btn" @click="editState = 0">取消</div>
				</div>
			</div>		
		</div>
	</div>
</template>
<script>
import {updateResumeSelfDesc} from '@/api/me/resume'
	export default {
		name:'self-desc',
		props:['resumeSelfDescs'],
		data: function() {
			return {
				editState:0,//0:显示，1：编辑
				form:{
					resumeId:this.$route.query.id,
					selfDesc: ""
				},
				rules: {
					selfDesc: [{ required: true, trigger: "blur", message: "请输入自我介绍" }]
				}
			}
		},
		watch:{
			resumeSelfDescs(val){
				if(val.length>0){
					this.form = val[0];
				}
				this.form.resumeId=this.$route.query.id;
			}
		},
		created() {


		},
		methods: {
			saveEdit(){
				this.$refs.form.validate(valid => {
					if (valid) {
						updateResumeSelfDesc(this.form).then(res => {
							this.$message.success('保存成功');
							this.editState=0;
						}).catch(err => {
							this.$message.error(err);
						})
					}
				})
			}
		}
	}
</script>
<style lang="scss">
	.self-desc{
		width: 100%;
		position: relative;
		margin: 30px 0;
		.edit-btn{
			color: #3EABC4;
			position: absolute;
			right: 0;
			top: 0;
			cursor: pointer;
			img{
				vertical-align: middle;
				margin-top: -2px;
				margin-right: 3px;
			}
		}
		.title{
			font-size: 16px;
			font-weight: bold;
			color: #3EABC4;
			border-left:4px solid #3EABC4;
			text-indent: 10px;
		}
		.desc-content .no-data{
			padding-left: 10px;
			margin-top: 40px;
		}
		.desc-content{
			margin-top: 25px;
			color: #787878;
			width: 785px;
			line-height: 30px;
		}
		.desc-edit{
			.content{
				margin-top: 25px;
				padding-bottom: 20px;
				.edit-item{
					width: 100%;
					.el-form-item{
						margin-bottom: 20px;
						.el-textarea{
							width: 850px;
						}
						.el-textarea__inner{
							border-radius: 0px;
							min-height: 120px !important;
						}
						
					}
				}
				.form-option{
					margin-top: 10px;
					padding-left: 10px;
					.save{
						margin-right: 15px;
					}
					
				}
			}
		}
	}
</style>
